<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  <style type="text/css">
    .content {
      width: 643px;
      margin: 200px auto;
      text-align: center;
    }

    input[type='text'] {
      width: 530px;
      height: 40px;
      font-size: 14px;
    }

    input[type='button'] {
      width: 100px;
      height: 46px;
      background: #38f;
      border: 0;
      color: #fff;
      font-size: 15px
    }

    #show {
      position: absolute;
      width: 535px;
      height: 100px;
      border: 1px solid #999;
      border-top: 0;
      display: none;
      text-align: left;
    }
  </style>
</head>
<body>
<div class="content">
  <img alt="" src="img/logo.png"><br/><br/>
  <input type="text" name="word" id="word" onkeyup="method01()">
  <input type="button" value="搜索一下">
  <div id="show"></div>
</div>
<script src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
  /*
  * # 需求: 当用户在输入框每输完一个字,就应该有提示, 如果框中没字,就没有提示
  *  0. sql :
  *           select * from user where name like ?
  *               关键字%
  *  1. 前端
  *       1). 请求类型: 异步
  *       2). 技术选型: axios
  *       3). 事件:  onchange不好用
  *                  onkeyup 当键盘抬起的时候
  *       4). 请求地址: UserServlet
  *       5. 请求参数:  文本框输入的关键字
  *
  *
  *  2. 后端
  *       1). 接收请求
  *       2). 业务处理: 查询数据库
  *       3). 响应给浏览器
  *
  *  3. 前端
  *       1). 获取响应
  *       2). 显示数据
  *
  *
  * */
  function method01() {

    let url = "/searchServlet";
    //获取文本框中输入的值
    let show = document.getElementById("show");
    let value = document.getElementById("word").value;
    //判断为空
    if (value) {
      let param = "keyword=" + value;
      axios.post(url, param).then(resp => {
        // debugger;
        // console.log(resp.data);
        //判断数据是否为空,resp.data返回的是一个列表数据，就是js数组
        let result = resp.data;
        if (result.length > 0) {
          //响应成功
          //每一个用户名就是一个div
          let html = "";//用于拼接结果
          for (let i = 0; i < result.length; i++) {
            let user = result[i];
            //html+="<div>"+user.name+"</div>";
            html += user.name + "<br>"
          }


          show.style.display = "block";// 修改css样式: 显示
          show.innerHTML = html;
        }
      });
    }else{
      show.style.display = "none";// 修改css样式: 隐藏
    }
  }
</script>
</body>
</html>